<template>
  <div>
    <!-- 个人资料 -->
    <div id="part_one">
      <div>
        <span class="part_one_span">姓名:</span>
        <el-input v-model="input" placeholder="联系人姓名"></el-input>
      </div>
      <div>
        <span class="part_one_span">手机号:</span>
        <el-input v-model="input" placeholder="联系人手机号查询"></el-input>
      </div>
      <div>
        <span class="part_one_span">大客户行业:</span>
        <el-select v-model="value" filterable placeholder="建筑业">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span class="part_one_span">单位:</span>
        <el-input v-model="input" placeholder="单位查询"></el-input>
      </div>
    </div>
    <!-- 地址 -->
    <div id="part_two">
      <span>请选择省：</span>
      <el-select v-model="value" filterable placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <span>请选择市：</span>
      <el-select v-model="value" filterable placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <span>请选择区：</span>
      <el-select v-model="value" filterable placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </div>
    <!-- 会员等级 -->
    <div id="part_three">
      <div>
        <el-button type="primary">+添加大客户专员</el-button>
        <span>大客户专员：</span>
        <el-radio v-model="radio" label="1">大客户专员</el-radio>
        <el-radio v-model="radio" label="2">大客户所属下级</el-radio>
      </div>
      <div>
        <el-button type="primary">重置</el-button>
        <el-button type="primary">查询</el-button>
      </div>
    </div>
    <!-- 会员资料 -->
    <div>
      <el-table :data="tableData"
                height="500px"
                border
                style="width: 100%">
        <el-table-column prop="ID"
                         label="ID">
        </el-table-column>
        <el-table-column prop="name"
                         label="联系人">
        </el-table-column>
        <el-table-column prop="number1"
                         label="手机号">
        </el-table-column>
        <el-table-column prop="date"
                         label="开通时间">
        </el-table-column>
        <el-table-column prop="people"
                         label="代理人">
        </el-table-column>
        <el-table-column prop="number2"
                         label="联系电话">
        </el-table-column>
        <el-table-column prop="province"
                         label="省"
                         width="180">
        </el-table-column>
        <el-table-column prop="city"
                         label="市">
        </el-table-column>
        <el-table-column prop="area"
                         label="区">
        </el-table-column>
        <el-table-column prop="status"
                         label="账号状态">
            <el-switch style="display: block"
                       v-model="va"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-text="开"
                       inactive-text="关">
            </el-switch>  
        </el-table-column>
        <el-table-column prop="operate"
                         label="操作">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
  #part_one {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom:30px;
  }
  #part_one>div{
    display:inherit;
    align-items:inherit;
  }

  .part_one_span {
    text-align:right;
    width: 120px;
    height:21px;
  }

  #part_two {
    padding-bottom:20px;
  }

  #part_three {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
</style>
<script>
  export default {
    data() {
      return {
        va: false,
        radio:"1",
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>
